<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../jquery/jquery-3.5.1.min.js"></script>
  <!-- <script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
  <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.css"> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    img {
      vertical-align: top;
    }
    div {
      position: absolute;
    }
    .middle {
      width: 200px;
      height: 200px;
      left: 200px;
      top: 200px;
      position: relative;
      border: 1px solid;
    }
    .middle img {
      width: 100%;
    }
    .middle span {
      width: 100px;
      height: 100px;
      position: absolute;
      background-color: rgba(165, 165, 161, 0.26);
      left: 0;
      top: 0;
      display: none;
    }
    .middle span.dis {
      display: block;
    }
    .big {
      width: 200px;
      height: 200px;
      left: 500px;
      top: 200px;
      overflow: hidden;
      border: 1px solid;
      display: none;
    }
    div.dis {
      display: block;
    }
    .big .img {
      position: relative;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
  <div class="middle">
    <img src="http://www.520touxiang.com/uploads/allimg/2018122110/vlh35zfem2g.jpg" alt="">
    <span></span>
  </div>
  <div class="big">
    <img class="img" src="http://www.520touxiang.com/uploads/allimg/2018122110/vlh35zfem2g.jpg" alt="">
  </div>
  <!-- <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li>
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav> -->
  <script>
    // $('.middle').on('mouseenter', function (e) {
    //   $('span').addClass('dis');
    //   $('.big').addClass('dis');
    //   $(document).on('mousemove', function (e) {
    //     // console.log(e.pageX, e.pageY)
    //     $le = e.pageX  - $('span').width()/2 - $('.middle').offset().left;
    //     $to = e.pageY  - $('span').height()/2 - $('.middle').offset().top;
    //     if ($le < 0) {
    //       $le = 0;
    //     } else if ($le > $('.middle').width() - $('span').width()) {
    //       $le = $('.middle').width() - $('span').width();
    //     }
    //     if ($to < 0) {
    //       $to = 0;
    //     } else if ($to > $('.middle').height() - $('span').height()) {
    //       $to = $('.middle').height() - $('span').height();
    //     }
    //     $('.img').css({
    //       left: -2*$le,
    //       top: -2*$to
    //     })
    //     $('span').css({
    //       left: $le,
    //       top: $to
    //     })
    //   })
    // })
    // $('.middle').on('mouseleave', function () {
    //   $('span').removeClass("dis");
    //   $('.big').removeClass("dis");
    // })
    $('.middle').on('mouseenter', function (e) {
      $('span').addClass('dis');
      $('.big').addClass('dis');
      $(document).on('mousemove', function (e) {
        // console.log(e.pageX, e.pageY)
        $le = e.pageX  - $('span').width()/2;
        $to = e.pageY  - $('span').height()/2;
        if ($le < $('.middle').offset().left) {
          $le = $('.middle').offset().left;
        } else if ($le > $('.middle').offset().left + $('.middle').width() - $('span').width()) {
          $le = $('.middle').offset().left + $('.middle').width() - $('span').width();
        }
        if ($to < $('.middle').offset().top) {
          $to = $('.middle').offset().top;
        } else if ($to > $('.middle').offset().top + $('.middle').height() - $('span').height()) {
          $to = $('.middle').offset().top + $('.middle').height() - $('span').height();
        }
        // $('.img').css({
        //   left: -2*$le,
        //   top: -2*$to
        // })
        // $('span').css({
        //   left: $le,
        //   top: $to
        // })
        $('span').offset({top: $to, left: $le})
        $('.img').offset({top: -2*$to, left: -2*$le})
      })
    })
    $('.middle').on('mouseleave', function () {
      $('span').removeClass("dis");
      $('.big').removeClass("dis");
    })
  </script>
</body>
</html>